import React, { Component } from "react";
import Son from "./Son";
import Modal from "./Modal";

export default class index extends Component {
  constructor(props) {
    super(props);
    this.state = {
      show: false,
    };
  }

  render() {
    return (
      <div>
        <h1>组件的内容</h1>
        <Son s1={<p>我是放在属性上的p</p>}>
          <p>我是内容p</p>
        </Son>
        <hr />
        <button onClick={() => this.setState({ show: true })}>
          打开模态框
        </button>
        {this.state.show ? (
          <Modal
            header="模态框标题"
            content="这里是一个自定义的模态框"
            onClose={() => this.setState({ show: false })}
          />
        ) : null}
      </div>
    );
  }
}
